import { Input, Button, List } from "antd";
import { ChangeAction, pushAction, delAction } from "./store/action";
import { connect } from "react-redux";
const App = (props) => {
  return (
    <div>
      <Input
        onChange={(e) => props.handleChange(e.target.value)}
        value={props.inputValue}
        placeholder="todolist"
        style={{ width: "300px", marginRight: "10px" }}
      />
      <Button type="primary" onClick={props.handleClick}>
        提交
      </Button>
      <List
        style={{ width: "300px", marginTop: "10px" }}
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        bordered
        dataSource={props.list}
        renderItem={(item, index) => (
          <List.Item onClick={props.handleDelete.bind(this, index)}>
            {item}
          </List.Item>
        )}
      />
      <ul>
        {props.list.map((item, index) => (
          <li onClick={props.handleDelete.bind(this, index)} key={index}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
};
// const mapStateToProps = (state) => {
//   return {
//     inputValue: state.inputValue,
//     list: state.list,
//   };
// };
// const mapDispatchToProps = (dispatch) => {
//   return {
//     handleChange(e) {
//       console.log(e.target.value);
//       dispatch(ChangeAction(e.target.value));
//     },
//     handleClick() {
//       dispatch(pushAction());
//     },
//     handleDelete: (index) => {
//       console.log(this);
//       dispatch(delAction(index));
//     },
//   };
// };
export default connect(
  (state) => ({
    inputValue: state.inputValue,
    list: state.list,
  }),

  {
    handleChange: ChangeAction,
    handleClick: pushAction,
    handleDelete: delAction,
  }
)(App);
